// 引入threejs
import * as THREE from 'three';
// 引入相机控件OrbitControls
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 引入Stats性能监视器
import Stats from 'three/addons/libs/stats.module.js';
const stats = new Stats();
document.body.appendChild( stats.domElement );


// ===============场景===============
// 创建一个场景
const scene = new THREE.Scene();

// ===============物体===============
// 给三维场景添加物体
// 给一个几何体 长方体 长宽高都是100
const geometry = new THREE.BoxGeometry(50, 50, 50);
// 漫反射材质MeshLambertMaterial:受光照影响
const material = new THREE.MeshLambertMaterial({
    color: 0x00ffff,
    transparent: true,
    opacity: 0.5
})
// 创建一个网格模型，表示生活中 物体
// const mesh = new THREE.Mesh(geometry, material);
// // 设置网格模型 位置
// mesh.position.set(0, 0, 0);
// // 将物体添加到场景中
// scene.add(mesh);

// 沿着x轴阵列多个立方体网格模型
for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(i * 100, 0, j * 100);
        scene.add(mesh);
    }
}

// 创建一个三维坐标轴
const axes = new THREE.AxesHelper(100);
scene.add(axes);


// ===============光源===============
// 创建一个点光源
const point = new THREE.PointLight(0xffffff, 1.0);
// 点光源位置
point.position.set(200, 150, 100);
// scene.add(point);

// 可视化点光源
const pointLightHelper = new THREE.PointLightHelper(point,5);
scene.add(pointLightHelper);

// 添加一个环境光
const ambient = new THREE.AmbientLight(0xffffff,0.2);
scene.add(ambient);

// 添加一个平行光
const directionalLight = new THREE.DirectionalLight(0xffffff,0.8);
directionalLight.position.set(50,100,50);
// directionalLight.target = mesh; // 默认坐标原点
scene.add(directionalLight);

// 可视化平行光
const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight,10,0xffff00);
scene.add(directionalLightHelper);

// ===============相机===============
// 定义相机输出画布的尺寸（单位：像素px）
// const width = 800;
// const height = 500;
// 全屏显示
const width = window.innerWidth;
const height = window.innerHeight;

// 设置相机的四个参数
// 创建一个透视投影相机对象
const camera = new THREE.PerspectiveCamera(60, width / height, 1, 3000)
// 设置相机的位置
camera.position.set(1200, 1200, 1200);
// camera.position.set(0, 0, 0);
// 定义相机的视线，观察目标点的坐标
camera.lookAt(500, 0, 500);  // 坐标原点
// camera.lookAt(0, 10, 0); // y轴上的一点
// camera.lookAt(mesh.position); // 指向网格模型mesh







// ===============渲染===============
// 创建一个webgl渲染器
const renderer = new THREE.WebGLRenderer();
// 设置canvas画布宽高
renderer.setSize(width, height);
// 执行渲染操作
renderer.render(scene, camera);
// 将渲染结果canvas画布，添加到网页页面上
document.body.appendChild(renderer.domElement);
// document.getElementById('webgl').appendChild(renderer.domElement);


// 周期性执行，默认理想状态下每秒执行60次
const clock = new THREE.Clock(); // 创建一个时钟对象
function render() {
    stats.update();// 更新性能监视器

    const spt = clock.getDelta()*1000; // 获取时间间隔单位：毫秒
    // console.log('spt',spt);
    // console.log('渲染帧率',1000/spt);
    // mesh.rotateY(0.01); //周期性旋转，每次旋转0.01弧度
    renderer.render(scene, camera); // 周期性执行相机的渲染功能，更新canvas画布
    requestAnimationFrame(render);
}
render();


// ===============相机控件===============
// 创建一个相机控件
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(500,0,500)
controls.update();
// 上面有循环渲染函数，可不执行下面的重复渲染
// controls.addEventListener('change', () => {
//     // 执行渲染操作
//     // renderer.render(scene, camera);
//     // console.log('camera.position',camera.position)
// });


window.onresize = function(){
    // 重置画布尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 重置相机投影的相关参数
    camera.aspect = window.innerWidth / window.innerHeight;
    // 渲染器重新渲染
    camera.updateProjectionMatrix();
}


